<template>
  <div class="all">
    <div class="top">
      <div class="tabar">
        <router-link to="/">
          <span @click="enterHome">综合态势</span></router-link
        >
        <router-link to="/security">
          <span @click="enterHome1">综合安防</span></router-link
        >
        <router-link to="/through">
          <span @click="enterHome2">便捷通行</span></router-link
        >
        <router-link to="/assets">
          <span @click="enterHome3">资产管理</span></router-link
        >
        <!-- <div class="center"> -->
          <div class="show">
            <img src="" alt="" />
          </div>
          <!-- <div class="one"></div>
          <div class="two"></div> -->
        <!-- </div> -->
        <router-link to="/warning">
          <span class="warn" @click="enterHome4">智能预警</span></router-link
        >
        <router-link to="/enery">
          <span @click="enterHome5">能效管理</span></router-link
        >
        <router-link to="/facility">
          <span @click="enterHome6">设施管理</span></router-link
        >
        <router-link to="/environment">
          <span @click="enterHome7">环境空间</span></router-link
        >
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, onBeforeMount } from "vue";
import { useRoute, useRouter } from "vue-router";
import routers from "@/router/index.js";
const router = useRouter();
const route = useRoute();
let routes = ref([]);
onBeforeMount(() => {});

const enterHome = () => {
  ue5("function_name11", "1");
};
const enterHome1 = () => {
  ue5("function_name12", "1");
};
const enterHome2 = () => {
  ue5("function_name13", "1");
};
const enterHome3 = () => {
  ue5("function_name14", "1");
};
const enterHome4 = () => {
  ue5("function_name15", "1");
};
const enterHome5 = () => {
  ue5("function_name16", "1");
};
const enterHome6 = () => {
  ue5("function_name17", "1");
};
const enterHome7 = () => {
  ue5("function_name18", "1");
};
onMounted(() => {
  ue5("function_name11", "1");
});
</script>
<style scoped>
.all {
  width: 100%;
  height: 0.5rem;
  background: url("@/assets/header/1.png");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left top;
}
.center {
  flex: 200px 0 0;
  width: 200px;
  display: flex;
  position: relative;
}
.show {
  /* margin: 0 auto; */
  flex: 50px 0 0;
  width: 80px;
  height: 50px;
  border-radius: 50px;
  box-shadow: 0px 2px 5px 15px #3e61bf;
}
.two {
  flex: 140px 0 0;
  margin: 0 auto;
  width: 140px;
  height: 140px;
  border-radius: 70px;
  border: 1px solid #f3f3f3;
  position: absolute;
  top: -70%;
  left: 15%;
}
.one {
  margin: 0 auto;
  flex: 180px 0 0;
  width: 180px;
  height: 180px;
  border-radius: 90px;
  border: 1px solid #f3f3f3;
  position: absolute;
  top: -100%;
  left: 5%;
}
.top {
  margin: 0 auto;
  width: 12rem;
  border-bottom: 2px solid;
  padding-bottom: 5px;
  height: 0.5rem;
  border-image: radial-gradient(circle, #84c5e5, #edf4f7) 2;
}
.tabar {
  margin: 0 auto;
  width: 9.62rem;
  height: 0.5rem;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 99999;
}
.tabar span {
  white-space: nowrap;
  display: block;
  padding: 0.05rem;
}
.tabar img {
  display: block;
}
a {
  text-decoration: none;
  color: #fff;
  font-size: 20px;
}
.router-link-active span {
  background: url("@/assets/header/2.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
/* .router-link-active span {
  text-shadow:1px 1px 5px #3e61bf, 0 0 10px #3e61bf,  0 0 15px #6333ff, 0 0 18px #fff;
} */
</style>
